<template>
  <BoTable
    :columns="columns"
    :request="getTagList"
    ref="tableRef"
    row-key="id"
    :row-selection="rowSelection"
    :show-index="true"
    class="tag-list"
  >
    <template #toolbars>
      <Space :size="8">
        <Button type="primary" @click="onAdd"> 新增标签 </Button>
        <Button :disabled="!selectKeys?.length" @click="onDelete()"
          >删除</Button
        >
      </Space>
    </template>
  </BoTable>
  <FormModal :columns="items"> </FormModal>
</template>
<route lang="json">
{
  "name": "tag-list",
  "meta": {
    "title": "标签管理"
  }
}
</route>
<script setup lang="tsx">
import { computed, ref } from 'vue';
import { useFormModal } from '@boeyo/hooks';
import { useDicts } from '@boeyo/portal';
import { BoFormProps, BoTable, BoTableProps } from '@boeyo/ui';
import { Button, Input, Modal, Space, message } from 'ant-design-vue';
import { addTag, deleteTag, getTagList, updateTag } from './api';

const tableRef = ref();
const selectKeys = ref<any[]>([]);
const rowSelection = computed<BoTableProps['rowSelection']>(() => {
  return {
    selectedRowKeys: selectKeys.value,
    onChange(values, all) {
      selectKeys.value = values;
    },
  };
});

const dictArr = ['use_status'];
const { useStatusEnum } = useDicts(dictArr);

const columns = computed<BoTableProps['columns']>(() => [
  {
    title: '标签类型',
    dataIndex: 'tagType',
    valueType: 'select',
  },
  {
    title: '标签名',
    dataIndex: 'alarmType',
    hideInSearch: true,
  },
  {
    title: '标签值',
    dataIndex: 'structureName',
    hideInSearch: true,
  },
  {
    title: '颜色',
    dataIndex: 'color',
    hideInSearch: true,
    customRender({ record }) {
      return (
        <div
          style={`background-color: ${record.color}; padding: 8px 10px; width:90px;`}
          class={'mx-auto flex items-center justify-center rounded'}
        >
          {record.color}
        </div>
      );
    },
  },
  {
    title: '更新时间',
    dataIndex: 'createBy',
    hideInSearch: true,
  },
  {
    title: '使用状态',
    dataIndex: 'status',
    hideInSearch: true,
    valueType: 'status',
    valueEnum: useStatusEnum.value,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    actions({ record }) {
      return [
        {
          text: '详情',
          onClick(record) {
            onView(record);
          },
        },
      ];
    },
  },
]);

const items = computed<BoFormProps['columns']>(() => [
  {
    title: '标签名',
    dataIndex: 'tagName',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入标签名',
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: '请输入标签名',
    },
  },
  {
    title: '标签类型',
    dataIndex: 'tagType',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入标签类型',
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: '请输入标签类型',
    },
  },
  {
    title: '标签值',
    dataIndex: 'tagVal',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入标签值',
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: '请输入标签值',
    },
  },
  {
    title: '颜色',
    dataIndex: 'color',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请选择颜色',
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: '请选择颜色',
    },
    render(state) {
      return (
        <div class='relative flex items-center justify-start'>
          <Input
            type='color'
            v-model:value={state.color}
            style='width: 100px; height: 40px; border: none; padding: 0'
          ></Input>
          <span class='width: 100px; height: 40px; top-50% pointer-events-none absolute left-[26px] flex items-center'>
            {state.color}
          </span>
        </div>
      );
    },
  },
]);

const { FormModal, open } = useFormModal({
  size: 'small',
  column: 1,
});

const onView = (record) => {
  open({
    title: (type) => (type === 'info' ? '详情' : '编辑'),
    modalType: 'info',
    request: async (params: any) => {
      await updateTag(params);
      tableRef.value.refresh();
    },
    defaultValue: {
      ...record,
    },
  });
};

const onAdd = async () => {
  open({
    title: '新增',
    defaultValue: {
      color: '',
    },
    request: async (params: any) => {
      await addTag(params);
      tableRef.value.refresh();
    },
  });
};

const onDelete = async (record = null) => {
  const ids = record ? record.id : selectKeys.value.join();
  if (!ids) return message.info('请选择要删除的数据');
  Modal.confirm({
    title: '系统提示',
    content: `确定删除当前选中项数据吗?`,
    onOk: async () => {
      await deleteTag(ids);
      message.success('操作成功');
      tableRef.value.refresh();
    },
  });
};
</script>

<style lang="scss" scoped></style>
